<template>
  <div style="height: 100%;background-color:white ;padding: 5px">
    <PreviewDialog :calculatorSore="calculatorSore" :describeContent="describeContent"
                   :fields="fields"
                   :medicalCalculatorData="medicalCalculatorData"
                   :type="cntFormulaType"
                   ref="preview"/>
    <div>
      <div style="display: inline-block">
        <el-button @click="goBack" icon="el-icon-back" size="small" type="text">返回</el-button>
      </div>
      <div style="display: inline-block">|</div>
      <div style="display: inline-block;">
        <div style="padding-bottom: 15px;margin-left:10px">
          <span style=" font-family: 'Microsoft YaHei',serif;display: inline-block">推送失败列表</span>
        </div>
      </div>
      <div style="border-bottom: solid 1px #C9C9C9;"></div>
    </div>
    <el-row style="margin-top: 10px">
      <el-col :span="12">
        <el-button @click="syncAll" size="small" type="primary">全量重新推送</el-button>
      </el-col>
      <el-col :span="12" style="text-align: center;">
        <SyncFailureSearch @confirm="refreshTableData"></SyncFailureSearch>
      </el-col>
    </el-row>

    <el-row style="width: 100%;margin-top: 10px">
      <el-table highlight-current-row :data="filteredData" :height="tableHeight" border>
        <el-table-column label="公式名称" prop="knowledgeName"></el-table-column>
        <el-table-column label="公式版本" prop="version"></el-table-column>
        <el-table-column label="推送平台" prop="platformName"></el-table-column>
        <el-table-column label="失败原因" prop="kind">
          <template slot-scope="scope">
            <span disabled v-if="scope.row.kind == 0">推送失败</span>
            <span style="color: red" v-if="scope.row.kind == 1">消费失败</span>
          </template>
        </el-table-column>
        <el-table-column :formatter="dateFormat" label="记录时间" prop="operatedTime"/>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link @click.prevent="showPreviewDialog(scope.row.knowledgeId)"> 查看</el-link>
            <el-link @click.prevent="afreshSync(scope.row)"> 重新推送</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <div style="margin-top: 10px">
        <el-pagination :page-size="pageSize" :total="totalNum" @current-change="handleCurrentChange" background
                       layout="total, prev, pager, next, jumper" style="text-align: right;"
                       v-if="multiplePages"></el-pagination>
      </div>
    </el-row>
  </div>
</template>


<script>
import moment from "moment";
import PreviewDialog from "./exportModel/PreviewDialog";
import SyncFailureSearch from "./SyncFailureSearch";

export default {
  name: "SyncFailureTable",
  components: {
    SyncFailureSearch,
    PreviewDialog
  },
  data() {
    return {
      filteredData: [],
      multiplePages: true,
      tableHeight: '',
        totalNum: 0,
        currentPage: 0, // 第几页
        pageSize: 10, // 每页显示的数据个数
        kind: '',
        platformId: '',
        operatedTime: '',
        previewDialogVisible: false,
        medicalCalculatorData: [],
        calculatorSore: [],
        describeContent: '',
        fields: [],
        cntFormulaType: 1,
      }
    },
    methods: {
      refreshTableData(nv, totalNum, name, kind, platformId, operatedTime) {
        this.filteredData = nv
        this.totalNum = totalNum
        this.name = name
        this.kind = kind
        this.platformId = platformId
        this.type = type
        this.operatedTime = operatedTime
      },
      dateFormat: function (row, column) {
        const date = row[column.property]
        if (date === undefined) {
          return ''
        }
        return moment(date).format("YYYY-MM-DD  HH:mm:ss")
      },
      showPreviewDialog: function (id) {
        console.log(id)
        let that = this
        this.axios.get('/pmph/action/medicalCalculator/selectReleasedCalculatorById', {
          params: {
            id: id,
          }
        }).then((response) => {
          console.log(response)
          that.medicalCalculatorData = response.data.medicalCalculatorData
          that.calculatorSore = response.data.calculatorSore
          that.describeContent = response.data.describeContent
          if (!this.describeContent) {
            this.describeContent = '无'
          }
          that.fields = response.data.fields
          that.cntFormulaType = response.data.type
          this.previewDialogVisible = true
        }).catch((error) => {
          console.error(error)
          this.$message.error("获取计算器数据失败");
        });
      },
      goBack: function () {
        this.$router.go(-1)
      },
      handleCurrentChange: function (val) {
        this.currentPage = val - 1;
        this.getTableData();
      },
      syncAll() {
        this.axios.get('/pmph/action/medicalCalculator/syncAllCalculator', {
          params: {}
        }).then((res) => {

        }).catch((err) => {

        })
      },
      afreshSync: function (row) {
        this.axios.get('/pmph/action/medicalCalculator/syncCalculator', {
          params: {

            calculatorIds: row.knowledgeId,
            platformIds: row.platformId,
          }
        }).then(() => {
            this.getTableData()
        })
      },
      getTableData: function () {
        this.axios.get('/pmph/action/medicalCalculator/selectSyncFailure', {
          params: {
            currentPage: this.currentPage,
            pageNum: this.pageSize,
            name: this.name,
            kind: this.kind,
            platformId: this.platformId,
            operatedTime: this.operatedTime,
          }
        }).then((response) => {
          this.noData = response.data.totalNum <= 0;
          this.filteredData = response.data.tableData;
          this.totalNum = response.data.totalNum;
        }).catch((error) => {
          console.error(error);
          this.filteredData = [];
          this.noData = true;
          this.$message.error("未能请求到数据");
        })
      },
    },
    created() {
      this.tableHeight = CONST.WORKSPACE_HEIGHT - 216;
      this.getTableData()
    }
  }
</script>

<style scoped>

</style>
